import React from 'react';
// import { Line } from '@ant-design/plots';
import { Column } from '@ant-design/plots';
import numeral from 'numeral';
import moment from 'moment';
import { Card, DatePicker } from 'antd';
type PropField = {
  title: string;
  data: API.ZyZhAndSy[];
  nfyf: string;
  height: number;
  onChange: (val: string) => void;
  loading: boolean;
};
const ZhSyAnalysis: React.FC<PropField> = (props) => {
  const datas: Record<string, any> = [];
  props.data.forEach((item) => {
    datas.push({
      xCol: item.nfyf,
      yCol: '绩效',
      type: '挣回',
      value: item.zhjx,
    });
    datas.push({
      xCol: item.nfyf,
      yCol: '费用',
      type: '挣回',
      value: item.zhfy,
    });
    datas.push({
      xCol: item.nfyf,
      yCol: '绩效',
      type: '使用',
      value: item.syjx,
    });
    datas.push({
      xCol: item.nfyf,
      yCol: '费用',
      type: '使用',
      value: item.syfy,
    });
  });
  const config = {
    data: datas,
    xField: 'xCol',
    yField: 'value',
    seriesField: 'type',
    stack: {
      groupBy: ['x', 'series'],
      series: false,
    },
    colorField: 'yCol',
    tooltip: { channel: 'y', valueFormatter: (d: number) => numeral(d).format('0,0') },
  };
  // const config = {
  //   data: datas,
  //   height: 58,
  //   padding: 0,
  //   xField: 'xCol',
  //   yField: 'yCol',
  //   colorField: 'series',
  //   seriesField: 'series',
  //   tooltip: { channel: 'y', valueFormatter: (d: number) => numeral(d).format('0,0') },
  //   axis: {
  //     x: false,
  //     y: false,
  //   },
  // };
  return (
    <Card
      size="small"
      title={props.title}
      bodyStyle={{ padding: '0px', height: props.height }}
      extra={
        <DatePicker
          onChange={(_, v) => props.onChange(v)}
          defaultValue={moment(props.nfyf, 'YYYY-M-D')}
          picker="month"
          size="small"
        />
      }
    >
      {/* <Line {...config} /> */}
      <Column {...config} />
    </Card>
  );
};
export default ZhSyAnalysis;
